<template>
<div class="jindu">
  <div class="search">
    <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
      <el-button slot="append" icon="el-icon-search"></el-button>
    </el-input>
  </div>
  <div class="table" style="text-align: center">
    <template>
      <el-table
          :data="tableData"
          border
          height="400"
          style="width: 100%">
        <el-table-column
            prop="jieduan"
            label="阶段"
            width="120">
        </el-table-column>
        <el-table-column
            prop="jieduanming"
            label="阶段名称"
            width="240">
        </el-table-column>
        <el-table-column
            prop="jieduanneirong"
            label="阶段内容"
            width="700">
        </el-table-column>
        <el-table-column
            label="操作"
            width="50">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
  <div class="tab">
    <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
      <el-tab-pane
          :key="item.name"
          v-for="(item) in editableTabs"
          :label="item.title"
          :name="item.name"
      >
        <el-steps :active="item.jindu" align-center
                  direction="vertical">
          <el-step v-for="(item2) in item.nr"  :description="item2.content"></el-step>
        </el-steps>
      </el-tab-pane>
    </el-tabs>
  </div>
  <router-view/>
</div>
</template>

<script>
import axios from "axios";

export default {
  name: "guihuajindu",
  data() {
    return {
      indexx:0,
      input3:'',
      //token
      token:'',
      //总进度条数据
      alljindu:[],
      //当前进度条数据
      jindutiaodata:[{
        title:'步骤一',
        txt:'学习'
      },{
        title: '步骤二',
        txt:'睡觉'
      }],
      editableTabsValue: '2',
      editableTabs: [],
      tabIndex: 2,
      tableData: [
          // {
      //   jieduan:1,
      //   jieduanming:'前端基础入门',
      //   jieduanneirong:'HTML5基础语法与标签',
      //   indexx:1,
      //   jinfu:3
      // },{
      //   jieduan:1,
      //   jieduanming:'前端基础入门',
      //   jieduanneirong:'CSS3基础语法与盒模型',
      //   indexx:2,
      //   jinfu:3
      // },{
      //   jieduan:1,
      //   jieduanming:'前端基础入门',
      //   jieduanneirong:'CSS3浮动定位与背景样式',
      //   indexx:3,
      //   jinfu:3
      // },{
      //   jieduan:1,
      //   jieduanming:'前端基础入门',
      //   jieduanneirong:'CSS3动画与穷游首页开发实战',
      //   indexx:4,
      //   jinfu:3
      // },{
      //   jieduan:1,
      //   jieduanming:'前端基础入门',
      //   jieduanneirong:'JS流程控制语句与数组',
      //   indexx:5,
      //   jinfu:3
      // },{
      //   jieduan:1,
      //   jieduanming:'前端基础入门',
      //   jieduanneirong:'JS函数与DOM',
      //   indexx:6,
      //   jinfu:3
      // },{
      //   jieduan:1,
      //   jieduanming:'前端基础入门',
      //   jieduanneirong:'面向对象',
      //   indexx:7,
      //   jinfu:3
      // },{
      //   jieduan:1,
      //   jieduanming:'前端基础入门',
      //   jieduanneirong:'项目实战：仿穷游JS特效开发',
      //   indexx:8,
      //   jinfu:3
      // },{
      //   jieduan:2,
      //   jieduanming:'组件化与移动WebApp开发',
      //   jieduanneirong:'ES6基础入门',
      //   indexx:9,
      //   jinfu:3
      // },{
      //   jieduan:2,
      //   jieduanming:'组件化与移动WebApp开发',
      //   jieduanneirong:'ES6语法扩展',
      //   indexx:10,
      //   jinfu:3
      // },{
      //   jieduan:2,
      //   jieduanming:'组件化与移动WebApp开发',
      //   jieduanneirong:'ES6之Promise与Class类',
      //   indexx:11,
      //   jinfu:3
      // },{
      //   jieduan:2,
      //   jieduanming:'组件化与移动WebApp开发',
      //   jieduanneirong:'ES6之Module模块与Babel编译',
      //   indexx:12,
      //   jinfu:3
      // },{
      //   jieduan:2,
      //   jieduanming:'组件化与移动WebApp开发',
      //   jieduanneirong:'项目实战：仿穷游组件化开发',
      //   indexx:13,
      //   jinfu:3
      // },{
      //   jieduan:2,
      //   jieduanming:'组件化与移动WebApp开发',
      //   jieduanneirong:'移动基础',
      //   indexx:14,
      //   jinfu:3
      // },{
      //   jieduan:2,
      //   jieduanming:'组件化与移动WebApp开发',
      //   jieduanneirong:'移动进阶之高效开发',
      //   indexx:15,
      //   jinfu:3
      // },{
      //   jieduan:2,
      //   jieduanming:'组件化与移动WebApp开发',
      //   jieduanneirong:'项目实战：仿穷游移动webapp开发',
      //   indexx:16,
      //   jinfu:3
      // },{
      //   jieduan:2,
      //   jieduanming:'组件化与移动WebApp开发',
      //   jieduanneirong:'项目实战：仿穷游JS特效开发',
      //   indexx:17,
      //   jinfu:3
      // },
  ]
    }
  },
  mounted() {
    this.find()
    this.alljindu.push()
    console.log(this.token)
  },
  methods: {
    //chaxnu
    find(){
      this.token=localStorage.getItem('token')
      axios({
        method:'get',
        url:'http://172.18.113.11:8081/chat/querytask',
        params:{
          question:'前端计划',
          chat:this.token,
          id:'3',
        }
      }).then(res=>{
        var sb=res.data.data
        for( var i in sb){
          this.tableData.push({
            jieduan:sb[i].type,
            jieduanming: sb[i].detil,
            jieduanneirong:sb[i].totall,
            jindu:sb[i].cur
          })
        }
      })
    },
    // 点击查看
    handleClick(row) {
      axios({
        method:'get',
        url:'http://172.18.113.11:8081/chat/get1',
        params:{
          chat:this.token,
          id:'3',
          level:row.jieduan
        }
      }).then(res=>{
        console.log(res.data)
        let newTabName = ++this.tabIndex + '';
        this.editableTabs.push({
          title: row.jieduanming,
          name: newTabName,
          content: 'New Tab content',
          nr:res.data,
          jindu:row.jindu
        });
        // console.log(this.editableTabs)
        this.editableTabsValue = newTabName;
      })
// console.log(this.editableTabs)
      // this.alljindu.push()
    },
    handleTabsEdit(targetName, action) {
      if (action === 'add') {
        let newTabName = ++this.tabIndex + '';
        this.editableTabs.push({
          title: 'New Tab',
          name: newTabName,
          content: 'New Tab content'
        });
        this.editableTabsValue = newTabName;
      }
      if (action === 'remove') {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }

        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      }
    }
  }
}
</script>

<style scoped>
.el-tab-pane{
  height: 1200px;
}
.tab{
  background-color: #fff;
}
.search{
  /*height: 100px;*/
  background-color: cyan;
}
.jindu{
  padding-top: 20px;
  background-color: #fff;
  margin: 20px;
  height: 100%;
}
</style>
